<template>
  <div class="string-list">
    <el-row v-for="(item, index) in list" :key="index" type="flex">
      <el-form-item :label="label[index]" :label-width="labelWidth">
        <check-string-group
          v-model="valList[index]"
          :list="item"
          :field="fieldList[index]"
          @otherCheck="$set(bol, index, $event)"
          @change="selectOther(index)"
        />
      </el-form-item>

      <el-form-item v-if="other && bol[index]" label-width="40px">
        <el-input v-model="detailList[index]" clearable @input="detailChange" />
      </el-form-item>
    </el-row>
  </div>
</template>

<script>
import CheckStringGroup from '@/components/Score/CheckStringGroup'
export default {
  components: {
    CheckStringGroup
  },
  model: {
    prop: 'value',
    event: 'checkStr'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    detail: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      required: true
    },
    fieldList: {
      type: Array,
      required: true
    },
    label: {
      type: Array,
      required: true
    },
    labelWidth: {
      type: String,
      default: '60px'
    },
    other: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      valList: [],
      bol: [],
      detailList: []
    }
  },
  watch: {
    valList: {
      handler(val) {
        this.checkChange()
      },
      deep: true
    },
    value(val) {
      this.valList = val.split('#<>')
      if (this.valList.length < this.list.length) {
        for (let i = this.list.length - 1; i > this.valList.length; i--) {
          this.valList[i] = ''
        }
      }
    },
    detail(val) {
      // this.detailList = val.split('#<>')
      const valArr = val.split('#<>')
      console.log(this.list, 'list')
      const arr = []
      this.list.forEach((el, index) => {
        el.forEach((item) => {
          if (item[this.fieldList[index] + 'Code'] === '99') {
            arr.push(index)
          }
        })
      })
      let count = 0
      arr.forEach((el) => {
        if (count < valArr.length) {
          this.detailList[el] = valArr[count]
        }
        count++
      })
      this.$emit('checkDetail', val)
    }
  },
  created() {
    for (let i = 0; i < this.fieldList.length; i++) {
      this.$set(this.bol, i, false)
    }
  },
  methods: {
    checkChange() {
      const str = this.valList.join('#<>')
      this.$emit('checkStr', str)
      this.$emit('change', str)
    },
    detailChange() {
      const detail = this.detailList.join('#<>')
      this.$emit('checkDetail', detail)
    },
    selectOther(index) {
      this.detailList[index] = ''
      this.detailChange()
    }
  }
}
</script>

<style scoped>
</style>
<style lang="scss">
.string-list {
  .el-form-item {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .el-input--medium .el-input__inner {
    padding-left: 10px !important;
  }
}
</style>
